<template>
  <view class="userinfopage">
    <view class="top">
      <image src="../../static/businessImg/back.png" class="topback" @click="back">
      </image>
      <view class="topname"> 店铺资料 </view>
    </view>

    <view class="usercenter">
      <view class="centerimg" @click="choosepic">
        <u-image :src="storeData.image" width="100%" height="100%" shape="circle"></u-image>
        <u-image class="zhaoxiangview" src="../../static/businessImg/zhaoxiang.png" width="44" height="44"
          shape="circle"></u-image>
      </view>

      <view class="userinfopageflexItem" @click="
          navigateTo(`/pages/gongyingshang/updatename?name=${storeData.name}`)
        ">
        <view class="userinfopageflexItem1"> 店铺名称 </view>

        <view class="userinfopageflexItem2">
          {{ storeData.name }}
          <image class="iconclass2" src="/static/businessImg/righticon.png" width="13rpx" heigth="24rpx"></image>
        </view>
      </view>

      <view class="userinfopageflexItem">
        <view class="userinfopageflexItem1"> 申请人姓名 </view>

        <view class="userinfopageflexItem2">
          {{ storeData.userName }}
        </view>
      </view>

      <view class="userinfopageflexItem">
        <view class="userinfopageflexItem1"> 联系电话 </view>

        <view class="userinfopageflexItem2">
          {{ storeData.mobile }}
        </view>
      </view>

      <view class="userinfopageflexItem">
        <view class="userinfopageflexItem1"> 身份证号码 </view>

        <view class="userinfopageflexItem2">
          {{ storeData.idCard }}
        </view>
      </view>

      <view class="userinfopageflexItem" @click="navigateTo('/pages/gongyingshang/shangjiaruzhuxieyi')">
        <view class="userinfopageflexItem1"> 供应商入驻协议 </view>

        <view class="userinfopageflexItem2">
          <image class="iconclass2" src="/static/businessImg/righticon.png" width="13rpx" heigth="24rpx">
          </image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import storage from "@/utils/storage.js";
import { updStoreData } from "@/api/storeAdmin.js";

import { supplierData, updData } from "@/api/gongyingshang.js";
export default {
  data() {
    return {
      storeData: {},
    };
  },

  onShow() {
    supplierData({
      id: storage.getUserInfo().storeId,
    }).then((res) => {
      this.storeData = res.data;
    });
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    choosepic() {
      let that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
            filePath: filePath,
            name: "file", // 必须填写，后台用来接收文件

            success: function (uploadFileRes) {
              console.log(uploadFileRes.data);
              updData({
                id: storage.getUserInfo().storeId,
                image: JSON.parse(uploadFileRes.data).data,
              }).then((res) => {
                uni.showToast({
                  icon: "none",
                  title: "修改成功",
                });
                supplierData({
                  id: storage.getUserInfo().storeId,
                }).then((res) => {
                  that.storeData = res.data;
                });
              });
            },
            fail: function (uploadFileErr) {
              console.log(uploadFileErr); // 上传失败后的操作
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped>
.userinfopage {
  width: 100%;
  min-height: 100vh;
}

.top {
  width: 100%;
  height: 188rpx;
  position: relative;
  background: #ffffff;
}

.topback {
  width: 16rpx;
  height: 29rpx;
  position: absolute;
  top: 106rpx;
  left: 32rpx;
}

.topname {
  width: 300rpx;
  height: 32rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 33rpx;
  color: #222222;
  line-height: 32rpx;
  position: absolute;
  top: 104rpx;
  left: 50%;
  transform: translateX(-50%);
}

.usercenter {
  width: 100%;
  margin-top: 17rpx;
  background: #ffffff;
  padding: 0 41rpx;
}

.centerimg {
  position: relative;
  width: 131rpx;
  height: 170rpx;
  margin: 0 auto;
  /* border-bottom: 2rpx solid #f3f3f3; */
  margin-bottom: 66rpx;
  padding-top: 29rpx;
}

.zhaoxiangview {
  position: absolute;
  bottom: 0;
  right: 0;
}

.userinfopageflexItem {
  width: 100%;
  height: 92rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2rpx solid #f3f3f3;
}

.userinfopageflexItem1 {
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 27rpx;
  color: #151f38;
}

.userinfopageflexItem2 {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 27rpx;
  color: #585d6c;
  display: flex;
  align-items: center;
}

.iconclass2 {
  width: 13rpx;
  height: 25rpx;

  padding-left: 10rpx;
}

.userinfopageflexItem3 {
  width: 100%;
  height: 446rpx;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  border-top: 2rpx solid #f3f3f3;
}

.userinfopageflexItem4 {
  width: 100%;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 27rpx;
  color: #151f38;
}

.userinfopageflexItem5 {
  width: 100%;
  height: 349rpx;
  border-radius: 15rpx;
  background: green;
}
</style>
